/* 
vuex的模块话:其实本质上是一个包含state mutations actions getters 属性的对象  
把这个对象暴露给vuex的new Vuex.Store()中进行模块化配置
*/
import { COUNT_INCREMENT, COUNT_INCREMENTN } from "../mutation-types";
const initState = {
  //对于一个属性永久花存储来说,当设置值的时候先去本地存储中查看是否存在该值,如果不存在则设置初始值

  price: 4,
  a: {
    b: {
      c: {
        d: 1,
      },
    },
  },
};
const state = initState;
const mutations = {
  [COUNT_INCREMENT](state) {
    //mutations中的事件函数this指向当前的store对象
    //mutations中的事件函数的第一个参数是当前store对象的state

    //mutations属性的事件函数中直接对state数据操作就可以(遵守vue的响应式修改数据的规范)
    state.count++;
    //只要当前永久话存储的值发生改动(vuex中只可能在mutations方法中改动),我们就更新本地存储的值
  },

  [COUNT_INCREMENTN](state, payload) {
    //mutations中的事件函数的第二个参数是 当前事件被 commit 的时候 传递的载荷payload
    state.count += payload.n;
  },
};
const actions = {
  incrementWait(store) {
    // console.log(store);
    setTimeout(() => {
      store.commit("COUNT_INCREMENT");
    }, 2000);
  },

  incrementNWait(store, payload) {
    // console.log(store, payload);
    setTimeout(() => {
      store.commit("COUNT_INCREMENTN", payload);
    }, 2000);
  },
};
const getters = {
  //vuex的getters使用场景1:数据是state的数据计算出来的
  totalPrice(state) {
    return state.count * state.price;
  },
  // vuex的getters使用场景2:vuex中的state数据非常复杂,而我们只需要其中的某个部分
  d(state) {
    return state.a.b.c.d;
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
};
